.popular-more {
  .banner {
    img {
      display: block;
      width: 100%;
    }
  }

  .more-content {
    // 动画
    .fade-enter {
      opacity: 0;
      transform: scale(0.9);
    }
    .fade-enter-active {
      opacity: 1;
      transform: translateX(0);
      transition: opacity 1000ms, transform 300ms;
    }
    .fade-exit {
      opacity: 1;
    }
    .fade-exit-active {
      opacity: 0;
      transform: scale(0.9);
      transition: opacity 1000ms, transform 300ms;
    }
    .more-title {
      background-color: #d5e1f0;
      .title-top {
        color: #e33c64;
      }
    }
    .character-content {
      margin-top: 24px;
      .content-insert {
        width: 900px;
        margin: auto;
        .chart-item {
          display: flex;
          background-color: #ddd;
          margin-bottom: 24px;
          .left-item {
            padding: 10px 0 0 40px;
            img {
              display: inline-block;
              width: 140px;
            }
            .left-text {
              text-align: center;
              color: red;
              padding: 20px 0 30px 0;
            }
          }
          .right-item {
            padding: 80px 100px 0 90px;
            position: relative;
            .right-desc {
            }
            .button {
              position: absolute;
              bottom: 30px;
              right: 36px;
              width: 174px;
              height: 38px;
              line-height: 38px;
              color: #000;
              text-align: center;
              background-color: #2a82e4;
            }
          }
        }
      }
      .button-text {
        text-align: center;
        margin-bottom: 35px;
      }
    }
  }
}
